<%@page import="cn.edu.pku.wxlib.usertobookreserve.model.*"%>

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
<%@ include file="/commons/taglibs.jsp"%>

<rapid:override name="head">
	<title>预约记录</title>

	<script src="${ctx}/scripts/rest.js"></script>
	<link href="<c:url value="/widgets/simpletable/simpletable.css"/>"
		type="text/css" rel="stylesheet">
	<script type="text/javascript"
		src="<c:url value="/widgets/simpletable/simpletable.js"/>"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			window.simpleTable = new SimpleTable('queryForm',${page.thisPageNumber},${page.pageSize},'${pageRequest.sortColumns}');
		});
	</script>
</rapid:override>

<rapid:override name="content">
	<form id="queryForm" name="queryForm" method="get"
		style="display: inline;">
		<div class="search">
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入读者号"
					value="${query.userId}" id="userId" name="userId" maxlength="10"
					class="form-field col-1-5" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-list"></i> <input placeholder="输入书本名称"
					value="${query.bookSkuid}" id="bookSkuid" name="bookSkuid"
					maxlength="10" class="form-field col-1-5" /> <br />
			</div>
			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="预借时间开始"
					type="text" value="${query.reserveTimeBegin}" id="reserveTimeBegin"
					name="reserveTimeBegin" class="form-field col-1" />
			</div>
			<strong>至</strong>
			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="预借时间结束"
					type="text"
					value="<fmt:formatDate value='${query.reserveTimeEnd}' pattern='<%=Usertobookreserve.FORMAT_RESERVE_TIME%>'/>"
					id="reserveTimeEnd" name="reserveTimeEnd" class="form-field col-1" />
				<br />
			</div>

			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="失效时间开始"
					type="text"
					value="<fmt:formatDate value='${query.failTimeBegin}' pattern='<%=Usertobookreserve.FORMAT_FAIL_TIME%>'/>"
					id="failTimeBegin" name="failTimeBegin" class="form-field col-1" />
			</div>
			<strong>至</strong>
			<div class="form-group inline icon">
				<i class="icon-calendar"></i> <input placeholder="失效时间结束"
					type="text"
					value="<fmt:formatDate value='${query.failTimeEnd}' pattern='<%=Usertobookreserve.FORMAT_FAIL_TIME%>'/>"
					id="failTimeEnd" name="failTimeEnd" class="form-field col-1" />

			</div>
			<div class="form-group inline icon search-btn"
				onclick="$('#queryForm').submit();" title="查询">
				<i class="icon-search"></i>
			</div>
		</div>
	</form>


	<div class="handleControl">
		<button type="button" class="btn btn-default"
			onclick="window.location = '${ctx}/usertobookreserve/new'">新增</button>
		<button type="button" class="btn btn-default"
			onclick="doRestBatchDelete('${ctx}/usertobookreserve','items',document.forms.queryForm)">删除</button>
	</div>

	<div class="gridTable">
		<table width="100%" border="0" cellspacing="0"
			class="table text-center">
			<thead>
				<tr>
					<th style="width: 1px;"><input type="checkbox"
						onclick="setAllCheckboxState('items',this.checked)"></th>
					<th sortColumn="userId">使用者</th>
					<th sortColumn="bookSKUId">图书编号</th>
					<th sortColumn="reserveTime">预约时间</th>
					<th sortColumn="failTime">失效时间</th>
					<th sortColumn="remark">备注</th>
					<th style="white-space: nowrap;">操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${page.result}" var="item" varStatus="status">
					<tr>
						<td><input type="checkbox" name="items"
							value="${item.userToBookReserveId}"></td>
						<td><c:out value='${item.userId}' />&nbsp;</td>
						<td><c:out value='${item.bookSkuid}' />&nbsp;</td>
						<td><c:out value='${item.reserveTimeString}' />&nbsp;</td>
						<td><c:out value='${item.failTimeString}' />&nbsp;</td>
						<td><c:out value='${item.remark}' />&nbsp;</td>
						<td><a
							href="${ctx}/usertobookreserve/${item.userToBookReserveId}" class="operation">查看</a>&nbsp;&nbsp;
							<a
							href="${ctx}/usertobookreserve/${item.userToBookReserveId}/edit" class="operation">修改</a>&nbsp;&nbsp;
							<a href="${ctx}/usertobookreserve/${item.userToBookReserveId}"
							onclick="doRestDelete(this,'你确认删除?');return false;" class="operation">删除</a></td>
					</tr>

				</c:forEach>
			</tbody>
		</table>

		<simpletable:pageToolbar page="${page}">
		</simpletable:pageToolbar>

	</div>
</rapid:override>
<rapid:override name="script">
	<script>
	var picker1 = new Pikaday(
		    {
		        field: document.getElementById('reserveTimeBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker2 = new Pikaday(
		    {
		        field: document.getElementById('reserveTimeEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
	var picker3 = new Pikaday(
		    {
		        field: document.getElementById('failTimeBegin'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
		    
	var picker4 = new Pikaday(
		    {
		        field: document.getElementById('failTimeEnd'),
		        firstDay: 1,
		        minDate: new Date('1900-01-01'),
		        maxDate: new Date('2020-12-31'),
		        yearRange: [1900,2020]
		    });
	</script>
</rapid:override>
<%@ include file="base.jsp"%>
